<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .body{
        width: 960px;
        height: 640px;
        /* border: 2px black solid; */
        position: relative;
        /* top: 200px; */
        left: 480px;
    }
    div.a,div.b{
        width: 480px;
        height: 48px;
        float: left;
    }
    div.b{
        position: absolute;
        left: 480px;
    }
    .eye{
        position: relative;
        top: 66px;
    }
    div.c{
        /* border:2px red solid; */
        width: 1050px;
        height: 48px;
        position: absolute;
        top: 48px;

    }
    div.d{
        border: rgb(119, 204, 138) 2px solid;
        position: relative;
        top: 75px;
        left: -2px;
        width: 960px;
        height: 390px;
        z-index: 2;
    }
    .book1{
        position:absolute;
        top: 337px;
        /* border: 2px red solid; */
        width: 550px;
        height: 300px;
    }
    .book2{
        position: absolute;
        /* border: 2px red solid; */
        top: 337px;
        left: 555px;
        width: 400px;
        height: 150px;
    }
    .book3{
        position: absolute;
        /* border: 2px red solid; */
        top: 487px;
        left: 555px;
        width: 400px;
        height: 150px;
    }
    li.a{
        position: relative;
        top: -5px;
        left: 40px;
        float: left;
        width: 100px;
        list-style-type: none;
        background:rgb(228, 249, 255);
        color: #636363;
        text-align: center;
        line-height: 40px;
        font-size: 1em;
        cursor: pointer;
        z-index: 10;
    }
    li.b{
        position: relative;
        top: -12px;
        left: -40px;
        float: left;
        width: 56.5px;
        list-style-type: none;
        background: rgb(255, 102, 0);
        color: white;
        text-align: center;
        line-height: 48px;
        font-size: 1.1em;
        cursor: pointer;
        z-index: 100;
    }
    .introduce1{
        position:absolute;
        top: 30px;
        left: 260px;
        width: 270px;
        height: 260px;
    }
    .picture1{
        position: absolute;
        top: 2px;
        left: 100px;
        z-index: 500;
    }
    .picture2{
        position: relative;
        top: 15px;
        z-index: 1;
    }
    .picture3{
        position: relative;
        top: -200px;
        left: -245px;
        z-index: 2;
    }
    .picture4{
        position: relative;
        top: 20px;
        left: 10px;
    }
    .picture5{
        position: relative;
        top: -55px;
        left: -95px;
    }
    .bangdan{
        position: relative;
        top: 20px;
        left: -13px;
    }
    .name1{
        position: relative;
        text-decoration:none;
        cursor: pointer;
        z-index: 100;
    }
    .name2,.price2{
        position: relative;
        top: -5px;
        left: -140px;
        text-decoration:none;
        overflow:hidden; 
        text-overflow:ellipsis;
        display:-webkit-box; 
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
    }
    .price3{
        position: relative;
        top: -5px;
        left: -130px;
        color: rgb(119, 204, 138);
    }
    .price2,.price1{
        color: red;
    }
    .price,.price2{
        float: left;
    }
</style>
<body>
    <div class="body">
        <div class="a">
            <img src="img/logo.jpg">
        </div>
        <div class="b">
            <ul>
                <img class="picture1" src="img/icon_count.png">
                <li class="a">尾品汇</li>
                <li class="a">当当优品</li>
                <li class="a">数字馆</li>
                <li class="a">都看阅器</li>
            </ul>
        </div>
        <div class="c">
            <ul>
                <li class="b">首页</li>
                <li class="b">图书</li>
                <li class="b">音像</li>
                <li class="b">童装</li>
                <li class="b">服装</li>
                <li class="b">鞋靴</li>
                <li class="b">运动</li>
                <li class="b">箱包</li>
                <li class="b">美妆</li>
                <li class="b">珠宝</li>
                <li class="b">家居</li>
                <li class="b">食品</li>
                <li class="b">酒</li>
                <li class="b">手机</li>
                <li class="b">数码</li>
                <li class="b">电脑</li>
                <li class="b">家电</li>
            </ul>
        </div>
        <div class="eye">
            <img src="img/banner.png">
        </div>
        <div class="d">
            <img class="bangdan" src="img/bg_bang.gif">
        </div>
        <div class="book1">
            <img class="picture2" src="img/book-01.jpg">
            <img class="picture3" src="img/bookNo1.gif">
            <div class="introduce1">
                <div>
                    <a class="name1" href="" target="_blank" >偷影子的人</a>
                </div>
                <div>作者:[法]马克·李维(Mac Levy)著</div>
                <div>出版社：湖南文艺出版社</div>
                <div class="price">当当价： </div>
                <div class="price1">¥ 17.90</div>
                <div>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能偷别人的影子</div>
            </div>
        </div>
        <div class="book2">
            <img class="picture4" src="img/book-02.jpg">
            <img class="picture5" src="img/bookNo2.gif">
            <div class="introduce1">
                <div>
                    <a  class="name2"href="" target="_blank" >看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘)</a>
                </div>
                <div class="name2">作者:柴静 著</div>
                <div class="name2">出版社：广西师范大学出版社</div>
                <div class="price2">¥ 29.40</div>
                <div class="price3">7.4折</div>
            </div>
        </div>
        <div class="book3">
            <img class="picture4" src="img/book-03.jpg">
            <img class="picture5" src="img/bookNo3.gif">
            <div class="introduce1">
                <div>
                    <a  class="name2"href="" target="_blank" >改变孩子先改变自己</a>
                </div>
                <div class="name2">作者:贾容韬 贾毅 著</div>
                <div class="name2">出版社：作家出版社</div>
                <div class="price2">¥ 22.20</div>
                <div class="price3">7.4折</div>
            </div>
        </div>
    </div>
</body>
</html>